<template>
  <div>
    <input
      class="todo-input"
      type="text"
      @click="inputStyle1"
      @blur="inputStyle2"
      @keyup.enter="addTodo"
      placeholder="请输入您的任务名称，按回车键确认"
    />
  </div>
</template>

<script>
export default {
  name: "MyHeader",
  props: ['addTodoList'],
  methods: {
    inputStyle1(e) {
      e.target.style.border = `2px solid #A4C5FA`;
      // event.style.caretColor = "#A4C5FA";
    },
    inputStyle2(e) {
      e.target.style.border = `2px solid aquamarine`;
    },
    addTodo(e) {
        let title = e.target.value;
        let todoObj = {id: this.$nanoid(), title: title, done: false};
        this.addTodoList(todoObj);
        e.target.value = "";
    }
  },
};
</script>

<style scoped>
.todo-input {
  width: 400px;
  height: 30px;
  padding-left: 6px;
  margin-top: 10px;
  margin-bottom: 20px;
  color: #333;
  caret-color: #a4c5fa;
  border: 2px solid aquamarine;
  font-size: 16px;
  text-shadow: 0 0 3px #f00;
  cursor: pointer;
  font-weight: 300px;
}
</style>